<script setup lang="ts">
defineOptions({
  name: "commonIframe"
});

import { ref, watch } from "vue";

const loading = ref<boolean>(false);

const props = withDefaults(defineProps<{ src: string }>(), { src: "" });

const onLoadHandler = () => {
  loading.value = false;
};

watch(
  () => props.src,
  () => {
    loading.value = true;
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<template>
  <div v-loading="loading" class="common-iframe">
    <iframe :src="src" v-bind="{ ...$attrs }" width="100%" height="100%" frameborder="0" @load="onLoadHandler" />
  </div>
</template>

<style lang="scss" scoped>
.common-iframe {
  width: 100%;
  min-width: 100px;
  height: 100%;
  min-height: 60px;
}
</style>
